import React from "react";
import * as _lodash from "lodash";
import { useEditStore } from "@/context/editStore/index";
import {Input} from "antd";
// 编辑器封装的组件
import {WrapTitle, LabeInput, LayoutFlex, LabeSlideFlex, ColorPickFlex, CardBoxRow} from "../../../components";
import "./index.less";

function HeTabNavControlConfig(): JSX.Element {
    const {state, dispatch} = useEditStore();
    // 配置属性
    const curData = _lodash.cloneDeep(state.curSelectedAssembly);
    const list = _lodash.cloneDeep(state.assemblyList);
    const {data = {}} = curData;
    const {resources = {}} = data;

    const inputHandleChange = (value: string | number, str: string) => {
        _lodash.set(curData, `data.resources.value.child.${str}.value`, value);
        dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
        const index = list.findIndex((item: any) => {
            return item?.onlyCode == curData.onlyCode;
        });
        list.splice(index, 1, curData);
        dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
    };

    const layoutChange = (value: string, str: string) => {
        console.log("-layoutChange-");
        console.log(value);
        _lodash.set(curData, `data.resources.attrs.child.${str}.value`, value);
        dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
        const index = list.findIndex((item: any) => {
            return item?.onlyCode == curData.onlyCode;
        });
        list.splice(index, 1, curData);
        dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
    };

    // 处理样式方法
    const handleStyles = (child: any) => {
        const htmlNode = [];
        const numberArr = ["pagePadding", "cmpUpperPadding", "cmpLowerPadding",
        "cmpUpperRadius", "cmpLowerRadius", "imgPadding", "imgWidth","imgRadius", "fontSize" ];
        const strArr = ["titleColor","cmpBackground"];

        const list = _lodash.cloneDeep(state.assemblyList);
        console.log("----handleStyles---");
        console.log(child);
        const styleChange = (value: any, str: string) => {
            if([...numberArr, ...strArr].indexOf(str) > -1) {
                _lodash.set(curData, `data.resources.styles.child.${str}.value`, value);
                dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
                const index = list.findIndex((item: any) => {
                    return item?.onlyCode == curData.onlyCode;
                });
                list.splice(index, 1, curData);
                dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
            }
        };

        if(!child) {
            return null;
        }
        for (const key in child) {
            if(numberArr.indexOf(key) > -1) {
                htmlNode.push(<LabeSlideFlex key={key} slide={child?.[key]} onChange={(value)=>styleChange(value, key)}></LabeSlideFlex>);
            }
            
            if(strArr.indexOf(key) > -1) {
                htmlNode.push(<ColorPickFlex  key={key} color={child?.[key]} onChange={(value) => {styleChange(value, key)}}></ColorPickFlex>);
            }
        }
        return htmlNode;
    };

    const handleList = (list: any) => {
        type VALUE_ITEM = {
            label: string,
            id: string,
            image: string
        }
        const listData = _lodash.cloneDeep(state.assemblyList);
        const handleChange = (e: React.ChangeEvent<HTMLInputElement>, idx: number) => {
            const { value } = e.target;
            _lodash.set(curData, `data.resources.list.value[${idx}].label`, value);
            dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
            const index = listData.findIndex((item: any) => {
                return item?.onlyCode == curData.onlyCode;
            });
            listData.splice(index, 1, curData);
            dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: listData}} );
        };
        const lsitNode = list?.value.map((item: VALUE_ITEM, index: number) => {
            return (
                <div key={item?.id} className="card-box">
                    {/* <LabeInput onChange={inputHandleChange} label="文本" value={resources?.value?.value} ></LabeInput> */}
                    <CardBoxRow>
                        <span>{list?.child?.label?.label}</span>
                        <Input placeholder="请输入" onChange={ (e) => { handleChange(e, index)}} value={item.label} />
                    </CardBoxRow>
                    <CardBoxRow>
                        <span>{list?.child?.image?.label}</span>
                        <div className="card-img-box" >
                            <img className="card-img" src={item.image} alt="" />
                        </div>
                    </CardBoxRow>
                    <CardBoxRow>
                        <span>{list?.child?.jump?.label}</span>
                        <span>选择跳转到的页面</span>
                    </CardBoxRow>
                </div>
            );
        });
        return lsitNode;
    };

    
    return (
        <div className="box-right-all">
            <div className="right-all-title">{data.name}</div>
            <div className="right-all-value">
                <WrapTitle title={resources?.value?.label}></WrapTitle>
                <div className="right-all-value-box">
                    {handleList(resources?.list)}
                </div>
            </div>
            <div className="right-all-attrs">
                <WrapTitle  title={resources?.attrs?.label}></WrapTitle>
                <div className="right-all-value-box">
                    {resources?.attrs?.child?.model &&
                    <LayoutFlex 
                        defaultValue={resources?.attrs?.child?.model} 
                        options={resources?.attrs?.child?.model?.data}
                        onChange={(value) => {
                            layoutChange(value, "model");
                        }}
                    ></LayoutFlex>}
                </div>
                <div className="right-all-value-box">
                    {resources?.attrs?.child?.type &&
                    <LayoutFlex 
                        defaultValue={resources?.attrs?.child?.type} 
                        options={resources?.attrs?.child?.type?.data}
                        onChange={(value) => {
                            layoutChange(value, "type");
                        }}
                    ></LayoutFlex>}
                </div>
                <div className="right-all-value-box">
                    {resources?.attrs?.child?.max &&
                    <LayoutFlex 
                        defaultValue={resources?.attrs?.child?.max} 
                        options={resources?.attrs?.child?.max?.data}
                        onChange={(value) => {
                            layoutChange(value, "max");
                        }}
                    ></LayoutFlex>}
                </div>
            </div>
            <div  className="right-all-style">
                <WrapTitle title={resources?.styles?.label}></WrapTitle>
                <div className="right-all-value-box">
                    {handleStyles(resources?.styles?.child)}
                </div>
            </div>
        </div>
    );
};
export default HeTabNavControlConfig;